<template>
  <div>
    <button @click="onClick">sdsds</button>
    <div id="editor" contenteditable="true">
      <!-- <TreeNode :treeData="data"/> -->
    </div>
  </div>
</template>
<script>
import { createEditor, Editor } from "slate";
const editor = createEditor();
import { ReactEditor } from "../edit/plugin/react-editor";
import TreeNode from './view.vue'
export default {
  data() {
    return {
      tabs: [
        {
          title: "queryTable",
          id: "queryTable",
          component: "QueryTable",
        },
      ],
      data:[]
    };
  },
  mounted() {
    const $dom = document.getElementById("editor");
    Editor.insertNode(editor, {  
      type: 'paragraph',  
      children: [{ text: '' }],  
    });  
    $dom.addEventListener("beforeinput", (event) => {
      const data = event.dataTransfer || event.data || undefined;
      const type = event.inputType;
      // 阻止默认行为，劫持所有的富文本输入

      // 根据 beforeInput 的 event.inputType
      switch (type) {
        case "deleteByComposition":
        case "deleteByCut":
        case "deleteByDrag": {
          Editor.deleteFragment(editor);
          break;
        }

        case "deleteContent":
        case "deleteContentForward": {
          Editor.deleteForward(editor);
          break;
        }

        case "deleteContentBackward": {
          Editor.deleteBackward(editor);
          break;
        }

        case "deleteEntireSoftLine": {
          Editor.deleteBackward(editor, { unit: "line" });
          Editor.deleteForward(editor, { unit: "line" });
          break;
        }

        case "deleteHardLineBackward": {
          Editor.deleteBackward(editor, { unit: "block" });
          break;
        }

        case "deleteSoftLineBackward": {
          Editor.deleteBackward(editor, { unit: "line" });
          break;
        }

        case "deleteHardLineForward": {
          Editor.deleteForward(editor, { unit: "block" });
          break;
        }

        case "deleteSoftLineForward": {
          Editor.deleteForward(editor, { unit: "line" });
          break;
        }

        case "deleteWordBackward": {
          Editor.deleteBackward(editor, { unit: "word" });
          break;
        }

        case "deleteWordForward": {
          Editor.deleteForward(editor, { unit: "word" });
          break;
        }

        case "insertLineBreak":
        case "insertParagraph": {
          Editor.insertBreak(editor);
          break;
        }

        case "insertFromComposition":
        case "insertFromDrop":
        case "insertFromPaste":
        case "insertFromYank":
        case "insertReplacementText":
        case "insertText": {
          if (data instanceof DataTransfer) {
            // 这里处理非纯文本（如 html 图片文件等）的粘贴。对于纯文本的粘贴，使用 paste 事件
            ReactEditor.insertData(editor, data);
          } else if (typeof data === "string") {
            Editor.insertText(editor, data);
          }
          break;
        }
      }
      this.data=editor.children
    });
  },
  methods: {
    onClick() {
      console.log();
    },
  },
  components: {TreeNode},
};
</script>
<style type="less" scoped>
#editor {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 200px;
}
</style>
